import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

import '../constants.dart';
import 'counter_badge.dart';

class SideMenuItem extends StatefulWidget {
  const SideMenuItem({
    Key key,
    this.index,
    this.itemCount,
    this.id,
    @required this.iconSrc,
    @required this.title,
    @required this.press,
  }) : super(key: key);

  final int itemCount, index, id;
  final String iconSrc, title;
  final Function(int) press;

  @override
  _SideMenuItemState createState() => _SideMenuItemState();
}

class _SideMenuItemState extends State<SideMenuItem> {
  bool isHover = false;
  bool isActive = false;

  @override
  Widget build(BuildContext context) {
    setState(() {
      isActive = (widget.index == widget.id);
    });
    return Padding(
        padding: EdgeInsets.only(top: kDefaultPadding),
        child: InkWell(
          onTap: () {
            widget.press(widget.id);
          },
          onHover: (value) {
            setState(() {
              isHover = value;
            });
          },
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 左边的图标
              (isActive)
                  ? SvgPicture.asset("assets/Icons/Angle right.svg", width: 15)
                  : SizedBox(width: 15),
              SizedBox(width: kDefaultPadding / 4),
              Expanded(
                child: Container(
                  padding: EdgeInsets.only(bottom: 15, right: 5),
                  decoration: isActive
                      ? BoxDecoration(
                          border: Border(
                            bottom: BorderSide(
                              color: Color(0xFFDFE2EF),
                            ),
                          ),
                        )
                      : null,
                  child: Row(
                    children: [
                      SvgPicture.asset(
                        widget.iconSrc,
                        height: 20,
                        color:
                            (isActive || isHover) ? kPrimaryColor : kGrayColor,
                      ),
                      SizedBox(width: kDefaultPadding * 0.75),
                      Text(
                        widget.title,
                        style: Theme.of(context).textTheme.button.copyWith(
                              color: (isActive || isHover)
                                  ? kTextColor
                                  : kGrayColor,
                            ),
                      ),
                      Spacer(),
                      if (widget.itemCount != null && isActive)
                        CounterBadge(count: widget.itemCount)
                    ],
                  ),
                ),
              ),
            ],
          ),
        ));
  }
}
